<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="example">
            <p>Original message: "{{ message }}"</p>
            <p>Computed reversed message: "{{ reversedMessage }}"</p>
            <p>Function "{{reversedMessageFn()}}"</p>
            <br>
            <br>
            <p>Computed Now: {{now}}</p>
            <p>nowFn: {{nowFn()}}</p>
            <p v-bind:style="[ baseStyles,overridingStyles]">sss</p>
            <div v-for="(item, index) in items" :key="index">
                <!-- 内容 -->
                <p>{{item.message}}</p>
            </div>
            <div>
                <input @keyup.ctrl.67="keyupHandler"/>
            </div>
            <div style="font-size: 60px;" @click.ctrl="keyUpClickHandler">
                ss
            </div>
            <input v-model="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>

            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ message }}</p>
            <br>
            <textarea v-model="message" placeholder="add multiple lines"></textarea>

            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>

            <div id='example-3'>
                <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                <label for="jack">Jack</label>
                <input type="checkbox" id="john" value="John" v-model="checkedNames">
                <label for="john">John</label>
                <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
                <label for="mike">Mike</label>
                <br>
                <span>Checked names: {{ checkedNames }}</span>

                <div id="example-4">
                    <input type="radio" id="one" value="One" v-model="picked">
                    <label for="one">One</label>
                    <br>
                    <input type="radio" id="two" value="Two" v-model="picked">
                    <label for="two">Two</label>
                    <br>
                    <span>Picked: {{ picked }}</span>
                </div>
                多选列表 (绑定到一个数组)：
                <div id="example-6">
                    <select v-model="selected" multiple style="width: 50px;">
                        <option>A</option>
                        <option>B</option>
                        <option>C</option>
                    </select>
                    <br>
                    <span>Selected: {{ selected }}</span>
                </div>

                <div>
                    <select v-model="selected1" multiple>
                        <!-- 内联对象字面量 -->
                        <option v-bind:value="{ number: 123 }">123</option>
                        <option v-bind:value="{ number: 456 }">456</option>
                    </select>
                    <span>Selected1: {{ selected1 }}</span>
                </div>
            </div>
        </div>

        <script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#example',
                data: {
                    message: 'Hello',
                    baseStyles: {
                        color: 'red',
                        fontSize: '13px',
                        fontWeight: 600
                    },
                    overridingStyles: {
                        color: "#0f0",
                        fontSize: "20px"
                    },
                    items: [
                        {message: 'Foo'},
                        {message: 'Bar'}
                    ],
                    checked: true,
                    checkedNames: [],
                    picked: "One",
                    selected: ["x"],
                    selected1: []
                },
                computed: {
                    // a computed getter
                    reversedMessage: function () {
                        // `this` points to the vm instance
                        return this.message.split('').reverse().join('')
                    },
                    now: function () {
                        return Date.now();
                    }
                },
                methods: {
                    reversedMessageFn: function () {
                        return this.message.split('').reverse().join('');
                    },
                    nowFn: function () {
                        return Date.now();
                    },
                    keyupHandler: function () {
                        alert("click ctrl + c");
                    },
                    keyUpClickHandler: function () {
                        alert("click !!");
                    }
                }
            })
        </script>
    </body>
</html>